//服务表格
import React from 'react'
import { Button, Space, Tag, Row, Col } from 'antd'
import TheTable from '@/components/TheTable'
import TheButton from '@/components/TheButton'

export default class ServiceTable extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      info: props.info, //订单数据信息
      refundColumns: [
        {
          title: '服务',
          render: (_, record) => {
            let serviceType = ''
            let skuInfoValue = [] //规格信息数据值 规格值可能会存在多个 多个情况下、分隔显示
            if (record.skuInfoObj) {
              if (record.skuInfoObj.specValues) {
                skuInfoValue = record.skuInfoObj.specValues.map(v => {
                  return v.specsValue
                }).join('/')
              }
              if (record.skuInfoObj.serviceType) {
                // 服务类型
                switch (record.skuInfoObj.serviceType) {
                  case 'FEED':
                    serviceType = '喂养'
                    break
                  case 'CARE':
                    serviceType = '洗护'
                    break
                  default:
                    serviceType = '-'
                }
              }
            }
            return (
              <div>
                <span>{serviceType ? serviceType : '-'}</span>
                {(serviceType && skuInfoValue) && <span style={{ margin: '0 5px' }}>|</span>}
                <span>{skuInfoValue}</span>
              </div>
            )
          }
        },
        {
          title: '服务时间',
          render: (_, record) => {
            return <span> {record.serviceDate}&nbsp;{record.serviceWeek}&nbsp;{record.serviceStartTime}~{record.serviceFinishTime} </span>
          }
        },
        {
          title: '金额（元）',
          dataIndex: "orderAmount",
          key: "orderAmount ",
          render: (text) => {
            return text ? '￥' + React.$transNum(text, text % 100 === 0 ? 0 : 2, -2) : '￥' + 0
          }
        },
        {
          title: '实付金额（元）',
          dataIndex: "payAmount",
          key: "payAmount",
          render: (text) => {
            return text ? '￥' + React.$transNum(text, text % 100 === 0 ? 0 : 2, -2) : '￥' + 0
          }
        },
        {
          title: '退款金额',
          dataIndex: "refundPrice",
          key: "refundPrice",
          render: (text, record) => {
            return text ? '￥' + React.$transNum(text, text % 100 === 0 ? 0 : 2, -2) : '￥' + 0
          }
        },
        {
          title: '服务者',
          dataIndex: "servicerName",
          key: "servicerName",
          render: (text, record) => {
            return text ? <TheButton onClick={() => { this.props.history.push('/call/servicer/servicerList/detail/' + record.servicerId + '/' + 'view') }}>{text}</TheButton> : '-'
          }
        },
        {
          title: '状态',
          dataIndex: "orderStatus",
          key: "orderStatus",
          render: (text) => {
            // 订单行状态
            let orderStatus = ''
            switch (text) {
              case 'WAIT_PAY':
                orderStatus = '待付款'
                break
              case 'WAIT_ORDER_TAKING':
                orderStatus = '待接单'
                break
              case 'WAIT_SERVICE':
                orderStatus = '待服务'
                break
              case 'IN_PROCESS':
                orderStatus = '服务中'
                break
              case 'FINISH':
                orderStatus = '已完成'
                break
              case 'CLOSE':
                orderStatus = '已关闭'
                break
              default:
                orderStatus = '-'
            }
            return orderStatus
          }
        }
      ],
      changeBeforeColumns: [
        {
          title: '服务',
          render: (_, record) => {
            let serviceType = ''
            let skuInfoValue = [] //规格信息数据值 规格值可能会存在多个 多个情况下、分隔显示
            if (record.skuInfoObj) {
              if (record.skuInfoObj.specValues) {
                skuInfoValue = record.skuInfoObj.specValues.map(v => {
                  return v.specsValue
                }).join('/')
              }
              if (record.skuInfoObj.serviceType) {
                // 服务类型
                switch (record.skuInfoObj.serviceType) {
                  case 'FEED':
                    serviceType = '喂养'
                    break
                  case 'CARE':
                    serviceType = '洗护'
                    break
                  default:
                    serviceType = '-'
                }
              }
            }
            return (
              <div>
                <span>{serviceType ? serviceType : '-'}</span>
                {(serviceType && skuInfoValue) && <span style={{ margin: '0 5px' }}>|</span>}
                <span>{skuInfoValue}</span>
              </div>
            )
          }
        },
        {
          title: '服务时间',
          render: (_, record) => {
            return <span> {record.serviceDate}&nbsp;{record.serviceWeek}&nbsp;{record.serviceStartTime}~{record.serviceFinishTime} </span>
          }
        },
        {
          title: '金额（元）',
          dataIndex: "orderAmount",
          key: "orderAmount ",
          render: (text) => {
            return text ? '￥' + React.$transNum(text, text % 100 === 0 ? 0 : 2, -2) : '￥' + 0
          }
        },
        {
          title: '实付金额（元）',
          dataIndex: "payAmount",
          key: "payAmount",
          render: (text) => {
            return text ? '￥' + React.$transNum(text, text % 100 === 0 ? 0 : 2, -2) : '￥' + 0
          }
        },
        {
          title: '服务者',
          dataIndex: "servicerName",
          key: "servicerName",
          render: (text, record) => {
            return text ? <TheButton onClick={() => { this.props.history.push('/call/servicer/servicerList/detail/' + record.servicerId + '/' + 'view') }}>{text}</TheButton> : '-'
          }
        },
        {
          title: '状态',
          dataIndex: "orderStatus",
          key: "orderStatus",
          render: (text) => {
            // 订单行状态
            let orderStatus = ''
            switch (text) {
              case 'WAIT_PAY':
                orderStatus = '待付款'
                break
              case 'WAIT_ORDER_TAKING':
                orderStatus = '待接单'
                break
              case 'WAIT_SERVICE':
                orderStatus = '待服务'
                break
              case 'IN_PROCESS':
                orderStatus = '服务中'
                break
              case 'FINISH':
                orderStatus = '已完成'
                break
              case 'CLOSE':
                orderStatus = '已关闭'
                break
              default:
                orderStatus = '-'
            }
            return orderStatus
          }
        }
      ], //待变更表头
      changeAfterColumns: [
        {
          title: '服务',
          render: (_, record) => {
            let serviceType = ''
            let skuInfoValue = [] //规格信息数据值 规格值可能会存在多个 多个情况下、分隔显示
            if (record.skuInfoObj) {
              if (record.skuInfoObj.specValues) {
                skuInfoValue = record.skuInfoObj.specValues.map(v => {
                  return v.specsValue
                }).join('/')
              }
              if (record.skuInfoObj.serviceType) {
                // 服务类型
                switch (record.skuInfoObj.serviceType) {
                  case 'FEED':
                    serviceType = '喂养'
                    break
                  case 'CARE':
                    serviceType = '洗护'
                    break
                  default:
                    serviceType = '-'
                }
              }
            }
            return (
              <div>
                <span>{serviceType ? serviceType : '-'}</span>
                {(serviceType && skuInfoValue) && <span style={{ margin: '0 5px' }}>|</span>}
                <span>{skuInfoValue}</span>
              </div>
            )
          }
        },
        {
          title: '服务时间',
          render: (_, record) => {
            return <span> {record.serviceDate}&nbsp;{record.serviceWeek}&nbsp;{record.serviceStartTime}~{record.serviceFinishTime} </span>
          }
        },
        {
          title: '金额（元）',
          dataIndex: "orderAmount",
          key: "orderAmount ",
          render: (text) => {
            // return <React.$Price price={text || 0} />
            return text ? '￥' + React.$transNum(text, text % 100 === 0 ? 0 : 2, -2) : '￥' + 0
          }
        }
      ],//变更后表头
      refundDataSource: [], //退款
      changeBeforeDataSource: [],//变更前
      changeAfterDataSource: [],//变更后
    }
  }
  componentDidMount() {
    this.getData()
  }
  //数据处理
  getData = () => {
    let { info } = this.props
    this.setState({
      refundDataSource: [],
      changeBeforeDataSource: [],
      changeAfterDataSource: []
    })
    if (info) {
      // refundDetailType 售后类型 0 退款 1 变更前 2变更后
      let refundArr = [], changeBeforeArr = [], changeAfterArr = []
      if (info.refundType === '1') {
        refundArr = info.orderDetailList.filter(item => item.refundDetailType === '2')  //找到订单行数组中售后类型是退款的所有数据 
      }
      if (info.refundType === '0') {
        changeBeforeArr = info.orderDetailList.filter(item => item.refundDetailType === '0')  //找到订单行数组中售后类型是退款的所有数据
        changeAfterArr = info.orderDetailList.filter(item => item.refundDetailType === '1')  //找到订单行数组中售后类型是退款的所有数据
      }
      this.setState({
        refundDataSource: refundArr,
        changeBeforeDataSource: changeBeforeArr,
        changeAfterDataSource: changeAfterArr
      })
    }
  }

  render() {
    const { refundColumns, changeAfterColumns, changeBeforeColumns, refundDataSource, changeAfterDataSource, changeBeforeDataSource, info } = this.state
    return (
      <div>
        {// 退款订单售后详情页面对应展示的table
          info.refundType === '1' && <TheTable scroll={{ x: 'max-content' }} dataSource={refundDataSource} columns={refundColumns}></TheTable>
        }
        {// 变更订单售后详情页面对应展示的table
          info.refundType === '0' &&
          <div>
            <div style={{ fontSize: 14, margin: ' 10px  0', fontWeight: 600 }}>待变更服务</div>
            <TheTable scroll={{ x: 'max-content' }} dataSource={changeBeforeDataSource} columns={changeBeforeColumns} />
            <div style={{ fontSize: 14, margin: ' 10px  0', fontWeight: 600 }}>变更后服务</div>
            <TheTable scroll={{ x: 'max-content' }} dataSource={changeAfterDataSource} columns={changeAfterColumns} />
            <Row style={{ display: 'flex', justifyContent: 'flex-end', marginRight: 20, alignItems: 'center', fontSize: 14 }}>
              {
                info.refundAllFlag === 1 && <Col >
                  <Row style={{ margin: '10px 0' }}>
                    <Col>退还原订单金额:</Col>
                    <Col style={{ marginLeft: 10 }}>{'￥' + React.$transNum(info.oldTotalPrice, info.oldTotalPrice % 100 === 0 ? 0 : 2, -2)}</Col>
                  </Row>
                  <Row style={{ margin: '10px 0' }}>
                    <Col>收取新订单金额: </Col>
                    <Col style={{ marginLeft: 10 }}>{'￥' + React.$transNum(info.newTotalPrice, info.newTotalPrice % 100 === 0 ? 0 : 2, -2)}</Col>
                  </Row>
                </Col>
              }
              {
                info.refundAllFlag === 0 && <Col>
                  <Row style={{ margin: '10px 0' }}>
                    <Col>退还服务差价: </Col>
                    <Col style={{ marginLeft: 10 }}>{'￥' + React.$transNum(info.refundTotalPrice, info.refundTotalPrice % 100 === 0 ? 0 : 2, -2)}</Col>
                  </Row></Col>
              }
            </Row>
          </div >
        }
      </div>
    )
  }
}